<template>
  <div class="check-in">
    <div class="check-in-calendar">
      <div v-for="day in 7" :key="day" class="day-box"
        :class="{ checked: isCheckedIn(day), current: isCurrentDay(day) }">
        <span class="day-number">{{ day }}</span>
        <span class="reward">{{ getReward(day) }}</span>
      </div>
    </div>
    <el-button @click="checkIn" :disabled="!canCheckIn" class="check-in-button">
      {{ canCheckIn ? '签到' : '今日已签到' }}
    </el-button>
    <p class="streak-info">当前连续签到: {{ player.checkinStreak }}天</p>
    <p class="next-bonus">距离下次额外奖励: {{ daysUntilNextBonus }}天</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMainStore } from '@/plugins/store'
import { gameNotifys } from '@/plugins/game'

const store = useMainStore()

const player = ref(store.player)
const rewards = ref([100, 200, 300, 400, 500, 1000, 2000])
const bonusRewards = ref([100, 2000, 5000])

const emit = defineEmits(['game-result'])

const canCheckIn = computed(() => {
  const now = new Date()
  const lastCheckin = new Date(player.value.lastCheckinDate)
  return !player.value.lastCheckinDate || now.toDateString() !== lastCheckin.toDateString()
})

const daysUntilNextBonus = computed(() => {
  return 7 - (player.value.checkinStreak % 7)
})

const isCheckedIn = (day) => {
  return day <= (player.value.checkinStreak % 7)
}

const isCurrentDay = (day) => {
  return day === ((player.value.checkinStreak % 7) + 1)
}

const getReward = (day) => {
  return rewards.value[day - 1] + (day === 7 ? bonusRewards.value[Math.floor(player.value.checkinStreak / 7)] : 0)
}

const checkIn = () => {
  if (!canCheckIn.value) return
  const dayInStreak = (player.value.checkinStreak % 7) + 1
  let reward = rewards.value[dayInStreak - 1]
  if (dayInStreak === 7) {
    const bonusLevel = Math.floor(player.value.checkinStreak / 7)
    reward += bonusRewards.value[Math.min(bonusLevel, 2)]
  }
  player.value.checkinStreak++
  player.value.checkinDays++
  player.value.lastCheckinDate = new Date().toISOString()
  player.value.props.cultivateDan += reward
  player.value.props.money += dayInStreak * 1000
  emit('game-result', { success: true, reward })
  gameNotifys({ title: '签到成功', message: `获得 ${reward} 培养丹！` })
}
</script>

<style scoped>
.check-in {
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 12px;
  color: var(--el-text-color-primary);
}

h3 {
  color: var(--el-text-color-primary);
}

.check-in-calendar {
  display: flex;
  overflow: auto;
  justify-content: center;
}

.day-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--el-fill-color-light);
  font-size: 14px;
  transition: all 0.3s ease;
  color: var(--el-text-color-primary);
  margin-left: 10px;
}

.day-box.checked {
  background-color: var(--el-color-success);
  color: var(--el-color-white);
}

.day-box.current {
  border: 2px solid var(--el-color-primary);
}

.day-number {
  font-weight: bold;
}

.reward {
  font-size: 12px;
}

.check-in-button {
  width: 100%;
  margin-top: 20px;
  background-color: var(--el-color-primary);
  color: var(--el-color-white);
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.check-in-button:disabled {
  background-color: var(--el-button-disabled-bg-color);
  color: var(--el-button-disabled-text-color);
}

.streak-info,
.next-bonus {
  margin-top: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

@media only screen and (max-width: 768px) {
  .check-in-calendar {
    display: -webkit-box;
  }
}
</style>